
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.search-from {
    width: 200px;
    margin: 10px 20px 0 0;
}
.from-item {
    flex: 1;
    margin: 0 10px;
}
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.noData{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
    border-top: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
    color: #CCC;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 待 发 货 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input clearable v-model="query.orderNo" placeholder="订单号" class="search-from"></el-input>
                <el-input clearable v-model="query.name" placeholder="收件人姓名" class="search-from"></el-input>
                <el-input clearable v-model="query.phone" placeholder="手机号" class="search-from"></el-input>
                <el-input clearable v-model="query.parentMobile" placeholder="推荐人" class="search-from"></el-input>
                <el-select clearable class="search-from" v-model="query.orderCategory" placeholder="订单类别">
                    <el-option :value="10" label="礼包"></el-option>
                    <el-option :value="20" label="商品"></el-option>
                </el-select>
                <!-- <el-date-picker
                v-model="query.payOnBegin"
                class="search-from"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="支付时间——开始">
                </el-date-picker>
                <el-date-picker
                class="search-from"
                v-model="query.payOnEnd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="支付时间——结束">
                </el-date-picker> -->
                <el-date-picker
                    v-model="query.dataRange"
                    class="search-from"
                    type="datetimerange"
                    style="width: 220px"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-button type="primary" @click="getList">搜索</el-button>
            </div>
            <div v-if="!fromData.length" class="noData">
                暂无数据
            </div>
            <div v-else>
                <el-card class="box-card" style="margin: 10px 0" v-for="(item, index) in fromData" :key="index">
                    <div slot="header" class="clearfix">
                        <span>订单号：{{ item.orderNo }}</span>
                        <div>
                            <el-button type="text" @click="changeShow(index)">{{ item.showGoods ? '收起' : '展开' }}商品</el-button>
                            <el-button type="text" @click="searchDetail(item)">订单详情</el-button>
                        </div>
                    </div>
                    <el-form label-position="left" label-width="80px" :model="fromItem">
                        <div style="display: flex">
                            <el-form-item label="会员账号:" class="from-item">
                                {{ item.mobile }}
                            </el-form-item>
                            <el-form-item label="收件人:" class="from-item">
                                {{ item.name }}
                            </el-form-item>
                            <el-form-item label="收件人电话:" label-width="90px" class="from-item">
                                {{ item.phone }}
                            </el-form-item>
                        </div>
                        <div style="display: flex">
                            <el-form-item label="支付时间:" class="from-item">
                                {{ item.paymentOn }}
                            </el-form-item>
                            <el-form-item label="订单类别:" class="from-item">
                                <span v-if="item.orderCategory == 10">礼包</span>
                                <span v-if="item.orderCategory == 20">商品</span>
                                <span v-if="item.orderCategory == 30">补货</span>
                                <span v-if="item.orderCategory == 40">单品</span>
                            </el-form-item>
                            <el-form-item label="支付类别:" class="from-item">
                                <span v-if="item.payCategory == 10">余额</span>
                                <span v-if="item.payCategory == 20">微信</span>
                            </el-form-item>
                        </div>
                        <div style="display: flex">
                            <el-form-item label="付款现金:" class="from-item">
                                {{ item.finishCashAmount }}
                            </el-form-item>
                            <el-form-item label="付款积分:" class="from-item">
                                {{ item.finishScoreAmount }}
                            </el-form-item>
                            <el-form-item label="下单时间:" class="from-item">
                                {{ item.createdOn }}
                            </el-form-item>
                        </div>
                        <div style="display: flex">
                            <el-form-item label="收件地址:" class="from-item">
                                {{ item.address }}
                            </el-form-item>
                        </div>
                        <el-form-item label="商品列表:" class="from-item" v-if="item.showGoods"></el-form-item>
                        <el-table :data="item.list" border v-if="item.showGoods" style="margin: 0 10px; box-sizing: border-box">
                            <el-table-column prop="date" label="缩略图" align="center" width="80">
                                <template slot-scope="scope">
                                    <el-image
                                        style="width: 50px; height: 50px"
                                        :src="scope.row.thumbnail"
                                        :preview-src-list="[scope.row.thumbnail]"
                                    >
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="commodityName" align="center" label="商品名称"> </el-table-column>
                            <el-table-column prop="standardName" align="center" label="规格名称"> </el-table-column>
                            <el-table-column prop="count" align="center" label="数量"> </el-table-column>
                        </el-table>
                    </el-form>
                </el-card>
            </div>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="详情" :visible.sync="senInfoShow" width="80%">
            <el-form ref="send" :model="senInfo" label-width="80px">
                <div style="display: flex">
                    <el-form-item label="会员账号:" class="from-item">
                        {{ senInfo.mobile }}
                    </el-form-item>
                    <el-form-item label="收件人:" class="from-item">
                        {{ senInfo.name }}
                    </el-form-item>
                    <el-form-item label="收件人电话:" label-width="90px" class="from-item">
                        {{ senInfo.phone }}
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="支付时间:" class="from-item">
                        {{ senInfo.paymentOn }}
                    </el-form-item>
                    <el-form-item label="订单类别:" class="from-item">
                        <span v-if="senInfo.orderCategory == 10">礼包</span>
                        <span v-if="senInfo.orderCategory == 20">商品</span>
                        <span v-if="senInfo.orderCategory == 30">补货</span>
                        <span v-if="senInfo.orderCategory == 40">单品</span>
                    </el-form-item>
                    <el-form-item label="支付类别:" class="from-item">
                        <span v-if="senInfo.payCategory == 10">余额</span>
                        <span v-if="senInfo.payCategory == 20">微信</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="订单状态:" class="from-item">
                        <span v-if="senInfo.orderStatus == 10">创建</span>
                        <span v-if="senInfo.orderStatus == 20">系统取消</span>
                        <span v-if="senInfo.orderStatus == 30">买家取消</span>
                        <span v-if="senInfo.orderStatus == 40">退货待审批</span>
                        <span v-if="senInfo.orderStatus == 50">已退货</span>
                        <span v-if="senInfo.orderStatus == 90">交易完成</span>
                    </el-form-item>
                    <el-form-item label="支付状态:" class="from-item">
                        <span v-if="senInfo.paymentStatus == 10">待支付</span>
                        <span v-if="senInfo.paymentStatus == 20">已支付</span>
                        <span v-if="senInfo.paymentStatus == 30">已退款</span>
                    </el-form-item>
                    <el-form-item label="物流状态:" class="from-item">
                        <span v-if="senInfo.logisticsStatus == 10">待发货</span>
                        <span v-if="senInfo.logisticsStatus == 20">平台已发货</span>
                        <span v-if="senInfo.logisticsStatus == 30">物流已发货</span>
                        <span v-if="senInfo.logisticsStatus == 40">已签收</span>
                        <span v-if="senInfo.logisticsStatus == 50">自提</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="粮票兑换商品:" label-width="100px" class="from-item">
                        {{ senInfo.saltName }}
                    </el-form-item>
                    <el-form-item label="运费:" class="from-item">
                        {{ senInfo.logisticsFee }}
                    </el-form-item>
                    <el-form-item label="快递公司编码:" label-width="100px" class="from-item">
                        {{ senInfo.logisticsCode }}
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="运单号:" class="from-item">
                        {{ senInfo.waybillNo }}
                    </el-form-item>
                    <el-form-item label="发货时间:" class="from-item">
                        {{ senInfo.finishOn }}
                    </el-form-item>
                    <el-form-item label="下单时间:" class="from-item">
                        {{ senInfo.createdOn }}
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="付款现金:" class="from-item">
                        {{ senInfo.finishCashAmount }}
                    </el-form-item>
                    <el-form-item label="付款积分:" class="from-item">
                        {{ senInfo.finishScoreAmount }}
                    </el-form-item>
                    <el-form-item label="收件地址:" class="from-item">
                        <span style="">{{ senInfo.address }}</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                </div>
                <el-form-item label="商品列表:" class="from-item"></el-form-item>
                <el-table :data="senInfo.list" border style="margin: 0 10px; box-sizing: border-box">
                    <el-table-column prop="date" label="缩略图" align="center" width="80">
                        <template slot-scope="scope">
                            <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.thumbnail"
                                :preview-src-list="[scope.row.thumbnail]"
                            >
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="commodityName" align="center" label="商品名称"> </el-table-column>
                    <el-table-column prop="standardName" align="center" label="规格名称"> </el-table-column>
                    <el-table-column prop="count" align="center" label="数量"> </el-table-column>
                </el-table>
            </el-form>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sureSend">发货</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryDelivered, QueryInfo } from '@/api/agent';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                dataRange: ''
            },
            senInfo: {
                amount: ''
            },
            senInfo2: {
                amount: ''
            },
            senInfoShow2: false,
            senInfoShow: false,
            pageTotal: 0,
            fromItem: {},
            fromData: []
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        changeSheng(e) {
            console.log(e);
            // this.query.provinceCode = e.pcode
            // this.cityList = e.cityList
            this.query.cityCode = '';
            this.proList.map((item, index) => {
                if (item.pid == e) {
                    this.cityList = item.cityList;
                }
            });
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            const data = JSON.parse(JSON.stringify(this.query));
            console.log(data.dataRange);
            data.payOnBegin =data.dataRange[0]
            data.payOnEnd =data.dataRange[1]
            QueryDelivered(data).then((res) => {
                this.fromData = res.Data.list.map((item) => {
                    item.showGoods = false;
                    return item;
                });
                this.pageTotal = res.Data.paging.totalItemCount;
            });
        },
        changeShow(index) {
            this.fromData[index].showGoods = !this.fromData[index].showGoods;
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(info) {
            //   console.log(info)
            QueryInfo({ id: info.id }).then((res) => {
                //   console.log(res)
                if (res.RequestStatus == 200) {
                    this.senInfo = res.Data;
                    this.senInfoShow = true;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        deleteDetail(info) {
            this.senInfo2 = JSON.parse(JSON.stringify(info));
            this.senInfoShow2 = true;
        },
        sureSend2() {
            Deduction(this.senInfo2).then((res) => {
                //   console.log(res)
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.senInfoShow2 = false;
                }
            });
        },
        sureSend() {
            Recharge(this.senInfo).then((res) => {
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.senInfoShow = false;
                }
            });
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>